<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./axios.min.js"></script>
  </head>
  <body>
    <h1>注册</h1>
    <input type="text" name="" id="username" /> <span></span>
    <br />
    <input type="text" name="" id="password" /> <span></span>
    <br />

    <input type="button" name="" id="btn" value="注册" />
    <script>
      /* 

        
        */
      let usernameIpt = document.querySelector("#username");
      let passwordIpt = document.querySelector("#password");
      let btn = document.querySelector("#btn");
      let isUsername = false;
      usernameIpt.onchange = function () {
        let reg = /^1[3-9]\d{9}$/;
        // let reg = /^1[3-9]\d{9}$/;
        if (reg.test(this.value)) {
          let checkUsernameAPI =
            "http://jx.xuzhixiang.top/ap/api/checkname.php";
          axios
            .get(checkUsernameAPI, {
              params: {
                username: this.value,
              },
            })
            .then((r) => {
              console.log(r.data);
              this.nextElementSibling.innerHTML = r.data.msg;
              if (r.data.code == 0) {
                isUsername = false;
              } else {
                isUsername = true;
              }
            });
        } else {
          this.nextElementSibling.innerHTML = "格式不争取";
          isUsername = false;
        }
      };

      let isPassword = false;
      passwordIpt.onchange = function () {
        let reg = /^.{6,}$/;
        if (reg.test(this.value)) {
          isPassword = true;
          this.nextElementSibling = "正确";
        } else {
          isPassword = false;
          this.nextElementSibling = "不正确";
        }
      };

      btn.onclick = function () {
        if (isUsername && isPassword) {
          //发起注册请求
          /* 
               接口地址：http://jx.xuzhixiang.top/ap/api/reg.php
    接口请求方式：get
    接口参数：
         username用户名
         password密码
    使用方式
           */

          let username = usernameIpt.value;
          let password = passwordIpt.value;
          let params = { username, password };
          let regAPI = "http://jx.xuzhixiang.top/ap/api/reg.php";
          axios.get(regAPI, { params }).then((res) => {
            console.log(res.data);
            if (res.data.code == 1) {
              alert(res.data.msg);
              location.href = "login.html";
            }
          });
          //   axios.get(regAPI,{params:{username,password}})
        } else {
          alert("请检查 上面的用户名和密码格式");
        }
      };
    </script>
  </body>
</html>
